//@ts-nocheck
import React from 'react';
import dva, {connect} from './dva';
import {Router/*如果是dva原生的 用这个路由组件就好(routerRedux.push(payload)是有效的)*/,Route,Link,routerRedux} from './dva/router';
// import {ConnectedRouter} from 'connected-react-router'; //dva使用的是 react-router-redux(已经过时了), react-router4.x及其以上的话, 官方其实推荐你使用 ConnectedRouter (但 dva没改, 而我们自己实现的dva采用新的 即connected-react-router这库)
//↓ dva内部实际用的这个库的 ConnectedRouter
// import {ConnectedRouter} from 'react-router-redux';

// 查看 05dva/dva/history/00.basic
const app = dva();

//定义一个模型, 就是一个redux模块
app.model({
  namespace: 'counter1',
  state: {number: 0},
  reducers: {
    //处理器对象的key再加上上面写的命名空间(namespace), 就是组件里你对应需要派发的动作名 (props.dispatch({type: 'counter/add'})
    add(state) {

      console.log('add');
      return {number: state.number + 1}
    }
  },
  effects: {
    //action动作
    //effects: redux/effects
    *asyncAdd(action,/*effects*/{call,put,select}){
      yield call(delay, 1500);
      yield put({type:'add'}); //这里put 如果不加前缀, 也是可以的, 会自动默认查找model里的add (毕竟不是从react-redux里导出的, 而是我们方法里解构出来的put, 说明dva做了处理); //一般来说如果你要派发的是自己的就不用加前缀 如果是跨组件(模块)派发就需要加前缀
      const state = yield select(state => state.counter1);
      console.log('state', state);
    },
    //如果触发的一个动作, effects 和 reducers都声明了同样的, 那么都会执行 (同步的先执行, 查看 04saga/redux-saga/index.js)
    //原则上 effect里 不能修改状态, 而是写义务逻辑的调接口的
    *add(action,{call,put,select}){
      console.log('*add');
    },
    *goto({payload},{put}){
      yield put(routerRedux.push(payload));
    }
  }
})


function Counter(props) {
  return (
    <div>
      <p>{props.number}</p>
      <button onClick={()=>props.dispatch({type: 'counter1/add'})}>同步+</button>
      <button onClick={()=>props.dispatch({type: 'counter1/asyncAdd'})}>异步+</button>
      <button onClick={()=>props.dispatch({type: 'counter1/goto', payload: '/'})}>跳转到home</button>
    </div>
  )
}

const ConnectedCounter1 = connect(
  state => state.counter1 /*←就是你上面model1,namespace指定的名字*/
)(Counter);


//定义路由: 最终要渲染什么?
const Home = () => <div>Home</div>;
app.router((api)=>(
  <routerRedux.ConnectedRouter history={api?.history}>
    <>
      <Link to='/'>Home</Link>
      <br/>
      <Link to='/counter'>Counter</Link>

      <Route path='/' exact={true} component={Home}/>
      <Route path='/counter' component={ConnectedCounter1}/>
    </>
  </routerRedux.ConnectedRouter>
))

//开始渲染, 把app.router方法的返回值渲染到#root容器里
app.start('#root');

export function delay(this: any, ms: number) {
  return new Promise(function (resolve) {
    setTimeout(resolve, ms);
  })
}
